::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar {
  display: block;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border: none;
  background: #3e415a;
}

::-webkit-scrollbar-track {
  background: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 14px;
  box-sizing: border-box;
  overflow: hidden;
}

/* 清除浮动 */
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
  overflow: hidden;
}

.clearfix {
  zoom: 1;
  /* for ie6 & ie7 */
}
.hide {
  display: none !important;
}
.show {
  display: block !important;
}
.invisible {
  visibility: hidden;
}
.hidden {
  display: none !important;
}
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
.text-nowrap {
  white-space: nowrap;
}
.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}
.text-ellipsis {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}

.ov-h {
  overflow: hidden;
}
.ov-a {
  overflow: auto;
}
.ovy-a {
  overflow-x: hidden;
  overflow-y: auto;
}
.ovx-a {
  overflow-x: auto;
  overflow-y: hidden;
}

.flex-h {
  flex-direction: row;
}
.flex-v {
  flex-direction: column;
}

.wh-percent-100 {
  width: 100%;
  height: 100%;
}

.pd-5 {
  padding: 5px;
}
.pd-10 {
  padding: 10px;
}
.pd-15 {
  padding: 15px;
}
.pd-20 {
  padding: 20px;
}
.pd-25 {
  padding: 25px;
}
.pd-30 {
  padding: 30px;
}
.pd-35 {
  padding: 35px;
}
.pd-40 {
  padding: 40px;
}
.pd-45 {
  padding: 45px;
}
.pd-50 {
  padding: 50px;
}

.mg-5 {
  margin: 5px;
}
.mg-10 {
  margin: 10px;
}
.mg-15 {
  margin: 15px;
}
.mg-20 {
  margin: 20px;
}
.mg-25 {
  margin: 25px;
}
.mg-30 {
  margin: 30px;
}
.mg-35 {
  margin: 35px;
}
.mg-40 {
  margin: 40px;
}
.mg-45 {
  margin: 45px;
}
.mg-50 {
  margin: 50px;
}

.flex-layout {
  display: flex;
}
.flex-v-layout {
  display: flex;
  flex-direction: column;
}
.flex-center-layout {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-v-center-layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flex-h-center {
  justify-content: center;
}
.flex-v-center {
  align-items: center;
}
.flex-1 {
  flex: 1;
}

.sf-layout:before,
.sf-layout:after,
.sf-layout-header:before,
.sf-layout-header:after,
.sf-layout-footer:before,
.sf-layout-footer:after,
.sf-layout-content:before,
.sf-layout-content:after,
.sf-layout-side:before,
.sf-layout-side:after {
  display: table;
  content: '';
}
.sf-layout:after,
.sf-layout-header:after,
.sf-layout-footer:after,
.sf-layout-content:after,
.sf-layout-side:after {
  clear: both;
  overflow: hidden;
}
.sf-layout,
.sf-layout-header,
.sf-layout-footer,
.sf-layout-content,
.sf-layout-side {
  position: relative;
}
.sf-layout-content.ovy-a,
.sf-layout-side.ovy-a {
  overflow-x: hidden;
  overflow-y: auto;
}

.sf-layout,
.sf-layout * {
  box-sizing: border-box;
}
.sf-layout {
  display: flex;
  flex: auto;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.sf-layout.has-side,
.sf-layout.flex-h {
  flex-direction: row;
}
.sf-layout-content {
  flex: 1;
  overflow: hidden;
}
.sf-layout-header,
.sf-layout-footer {
  flex: 0 0 auto;
}
.sf-layout-side,
.sf-layout-side-right {
  width: 200px;
  height: 100%;
  transition: all 0.2s;
}
.sf-layout-side-right {
  order: 1;
}
